<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Registro Nuevo Proyecto</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>

<!-- Estilo y JS-->
<link rel="stylesheet" type="text/css" href="estiloIngresoObjetivosEspecificos.css" />
<link rel="stylesheet" type="text/css" href="estiloIngresoParticipantes.css" />
<script src="validaciones.js"></script>
<script src="validaciones2.js"></script> 
<!-- <script src="enviar.js"></script> -->

</head>
<body>

	<form action="datos_proyecto_form" class=" formulario">

		<div id="cabecera" align="center">
			<h1>NUEVO PROYECTO</h1>
		</div>
		<div class="margenes">
		
			<div id="datos">
				<div>
					<br>
					<header> DATOS DEL PROYECTO </header>

					<p>Complete los datos solicitados a continuación para crear el
						nuevo proyecto</p>
				</div>
				<table class="tblPropVal">
					<tbody>

						<tr>
							<td class="tdEnunciados">Responsable: <span class="star">
									* </span>
							</td>
							<td><input id="txtResponsable" type="text"
								name="txtResponsable" value="Usuario de prueba" readonly></input></td>
						</tr>


						<tr>
							<td class="tdEnunciados">Nombre del Proyecto: <span class="star">
									* </span>
							</td>
							<td><input id="nombre_proyecto" type="text"
								name="nombre_proyecto" required></input></td>
						</tr>

						<tr>
							<td class="tdEnunciados">Descripción: <span class="star">
									* </span>
							</td>
							<td><textarea rows='6' id="descripción_proyecto"
									name="descripción_proyecto" required></textarea></td>
						</tr>

						<tr>
							<td class="tdEnunciados">Tipo de proyecto: <span
								class="star"> * </span>
							</td>
							<td><select name="tipo_proyecto">
									<option value="1">Docencia</option>
									<option value="2">Investigacion</option>
									<option value="3">Extension</option>
							</select></td>
						</tr>


						<tr>
							<td class="tdEnunciados">Modalidad del proyecto: <span
								class="star"> * </span>
							</td>
							<td><select name="modalidad_proyecto">
									<option value="1">Presencial</option>
									<option value="2">Regionalización</option>
									<option value="3">ude@</option>
							</select></td>
						</tr>

						<tr>
							<td class="tdEnunciados">Fecha Inicial: <span class="star">
									* </span>
							</td>
							<td><input type="date" name="fechaInicial"
								id="fecha_Inicial" required></input></td>
						</tr>


						<tr>
							<td class="tdEnunciados">Fecha Final: <span class="star">
									* </span>
							</td>
							<td><input type="date" name="fechaFinal" id="fecha_Final"
								required></input></td>
						</tr>


						<tr>
							<td class="tdEnunciados">Asesor(es): <span class="star">
									* </span>
							</td>
							<td><a href="#add_persona" id="login_pop">Agregar</a></td>
						</tr>
					</tbody>
				</table>
			</div>


			<div id="objetivos">
				<div>
					<br>
					<header> OBJETIVOS DEL PROYECTO </header>

					<p>Describa cual es el objetivo principal del proyecto y los
						objetivos especificos</p>
				</div>
				<table class="tblPropVal">
					<tbody>
						<tr>
							<td class="tdEnunciados">Objetivo General: <span
								class="star"> * </span>
							</td>
							<td><textarea name="objetivoGeneral" rows='4' required></textarea></td>
						</tr>

						<table>
							<tr>
								<div id="nuevoObjetivo" title="Agregar Nuevo Objetivo Especifico">
								  <p class="advertencia">Todos los campos son requeridos</p>
								  <form>
								  <fieldset>
									<label for="textoObjetivoEspec">Descripcion</label>
									<input type="text" nombre="textoObjetivoEspec" id="textoObjetivoEspec"  class="text ui-widget-content ui-corner-all" autofocus required />
									<label for="porcentaje">Porcentaje (%)</label>
									<input type="number" nombre="porcentaje" id="porcentaje" value="" class="text ui-widget-content ui-corner-all" />
								  </fieldset>
								  </form>
								</div>
								 
								 <!-- Formulario para ingresar un participante-->
								<td class="tdEnunciados">Ingrese cada uno de los objetivos especificos: <span class="star"> * </span>
									<div id="listaObjetivos" class="ui-widget">
									  <table id="users" class="ui-widget ui-widget-content">
										<thead>
										  <tr class="ui-widget-header ">
											<th>Descripcion</th>
											<th>Porcentaje (%) </th>
										  </tr>
										</thead>
										<tbody>
										  <tr>
										  <!-- aqui quedan los objetivos que se agreguen -->
										  </tr>
										</tbody>
									  </table>
									</div>
									<button id="agregar">Agregar</button>
								</td>
							</tr>
						</table>

					</tbody>
				</table>
			</div>


			<div id="participantes">

				<div>
					<br>
					<header> PARTICIPANTES </header>
				</div>
				<table class="tblPropVal">
				
				<div id="nuevoParticipante" title="Agregar Nuevo Participante">
				  <p class="advertencia">Todos los campos son requeridos</p>
				 
				  <form>
				  <fieldset>
					<label for="nombre">Nombre</label>
					<input type="text" nombre="nombre" id="nombre" class="text ui-widget-content ui-corner-all" />
					<label for="identificacion">Identificacion</label>
					<input type="text" nombre="identificacion" id="identificacion" value="" class="text ui-widget-content ui-corner-all" />
				 
				  </fieldset>
				  </form>
				</div>
				
				
					<td class="tdEnunciados">Ingrese cada uno de los participantes: <span class="star"> * </span>
						<div id="listaParticipantes" class="ui-widget">
						  <table id="users2" class="ui-widget ui-widget-content">
							<thead>
							  <tr class="ui-widget-header ">
								<th>Nombre</th>
								<th>Identificacion</th>
							  </tr>
							</thead>
							<tbody>
							  <tr>
							  <!-- aqui quedan los participantes que se agreguen -->
							  </tr>
							</tbody>
						  </table>
						</div>
						<button id="agregar2">Agregar</button>
					</td>
				</table>
			</div>
			<br>
			<div align="center">
			<table>
				<tr>
				<td><input id="enviar" type="button" value="Guardar"></td>
				
				<td><input type="reset" value="Cancelar"></td>
				</tr>
			</table>
			</div>
		</div>
	</form>

	<!-- popup busqueda personas -->

	<a href="#Busqueda" class="overlay" id="add_persona"></a>

	<div class="popup">

		<header>Busqueda</header>

		<p>Por favor ingrese el nombre o cedula de la persona que desea
			agregar</p>

		<div>
			<label>Nombre: </label><input type="text" name="nombre"
				placeholder="Nombre" id="NAME">
		</div>
		<div>
			<label>Cédula:</label><input type="text" name="cedula"
				placeholder="cedula">
		</div>
		<div align="center">
			<input type="submit" value="Agregar">
		</div>
		<a class="close" href="#close"></a>

  <script>
  $(function() {
    var availableTags = [
      "Diego Jose Luís Botía Valderrama",
      "Jhon Freddy Duitama",
      "Luz Viviana Cobaleda Estepa",
      "Julian David Arias ",
      "Hernando Silva",
      "Freddy Rivera",
      "Ana Lucia Perez",
      "Juan Fernando Franco",
      "Juan Carlos Marin"
    ];
    $( "#NAME" ).autocomplete({
      source: availableTags
    });
  });
  </script>


	</div>
	


</body>
</html>